<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>Data Life</title>
</head>
<body>
<div class="container" id="app-main" v-cloak>
    <div class="row" style="padding-top: 10%">
        <div class="col-3">
            <p class="text-right"><a href="#" class="btn btn-light" @click="goWeek">返回</a></p>
        </div>
    </div>
    <div class="row">
        <div class="col-8">{{ recordItem.comment }} 总支出</div>
        <div class="col-4">{{ recordItem.value }}</div>
    </div>
    <div class="row">
        <div class="col-12">{{ recordItem.record_date }}</div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-12">
            <div v-for="(extra, index) in extras" class="row" style="margin-top: 5%" @click="clickModal(index)">
                <div class="col-12">
                    <div class="row">
                        <div class="col-8">{{ extra.record_date }}</div>
                        <div class="col-4">{{ extra.value }}</div>
                    </div>
                    <div class="row">
                        <div class="col-12">{{ extra.comment }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-8">其他支出</div>
        <div class="col-4">{{ left }}</div>
    </div>

    <form style="margin-top: 20%">
        <div class="form-group row">
            <div class="col-4">
                <input type="number" class="form-control" v-model="value" placeholder="数值">
            </div>
            <div class="col-8">
                <input type="date" class="form-control" v-model="recordDate">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-10">
                <input type="text" class="form-control" v-model="comment" placeholder="备注">
            </div>
            <div class="col-2">
                <span class="custom-icon"><span class="fas fa-plus" @click="clickCreate"></span></span>
            </div>
        </div>
    </form>

    <div class="modal fade" id="updateModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <form v-if="extras.length > 0">
                                <div class="form-group row">
                                    <div class="col-4">
                                        <input type="number" class="form-control" v-model="extras[index].value">
                                    </div>
                                    <div class="col-8">
                                        <input type="date" class="form-control" v-model="extras[index].record_date">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-12">
                                        <input type="text" class="form-control" v-model="extras[index].comment">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" @click="clickDelete(index)">Delete</button>
                    <button type="button" class="btn btn-outline-success" @click="clickUpdate(index)">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"></script>
<script src="https://kit.fontawesome.com/e78d7410b3.js" crossorigin="anonymous"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=2"></script>
<script>
    // let serverData = {"record_item":{"id":2423,"record_date":"2021-03-08","value":3640,"comment":"花呗"},"extras":[{"id":1,"record_date":"2021-02-06","value":249,"comment":"常营买衣服"},{"id":2,"record_date":"2021-02-14","value":258,"comment":"常营买衣服"},{"id":3,"record_date":"2021-02-15","value":614,"comment":"新世界买了2双鞋"},{"id":4,"record_date":"2021-02-26","value":784,"comment":"团建聚餐吃水煮鱼"},{"id":5,"record_date":"2021-02-27","value":348,"comment":"常营买衣服"}]}
    // let vm = initVueApp();
    // initApp();

    let serverData, vm;

    axios.get(env.apiPrefix + '/record-item-extras', {params: {record_item_id: getParam("record_item_id")}})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
            initApp();
        });

    function initVueApp() {
        return new Vue({
            el: '#app-main',
            data: {
                canSave: true,
                recordItem: serverData.record_item,
                extras: serverData.extras,
                left: getLeft(serverData.record_item.value, serverData.extras),
                index: 0,
                value: null,
                comment: null,
                recordDate: null
            },
            methods: {
                clickModal: function (index) {
                    this.index = index;
                    $('#updateModal').modal("show");
                },
                clickUpdate: function (index) {
                    let r = confirm("是否确定修改");
                    if (r == false) {
                        return false;
                    }

                    let recordItemExtra = this.extras[index];

                    let requestData = {
                        value: recordItemExtra.value,
                        comment: recordItemExtra.comment,
                        record_date: recordItemExtra.record_date
                    };
                    axios.put(generateUrl(`/record-item-extras/${recordItemExtra.id}`, {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.left = getLeft(vm.recordItem.value, vm.extras);
                            $('#updateModal').modal("hide");
                        });
                },
                clickDelete: function (index) {
                    let r = confirm("是否确定删除");
                    if (r == false) {
                        return false;
                    }

                    let recordItemExtra = vm.extras[index];

                    axios.delete(generateUrl(`/record-item-extras/${recordItemExtra.id}`, {}, env.apiPrefix), {})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.index = 0;
                            vm.left += recordItemExtra.value;
                            vm.extras.splice(index, 1);
                            $('#updateModal').modal("hide");
                        });
                },
                clickCreate: function () {
                    if (!this.canSave) {
                        return false;
                    }
                    this.canSave = false;

                    let requestData = {
                        record_item_id: this.recordItem.id,
                        record_date: this.recordDate,
                        value: this.value,
                        comment: this.comment
                    };
                    axios.post(generateUrl('/record-item-extras', {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            let recordItemExtra = {
                                id: response.data.data.id,
                                value: requestData.value,
                                comment: requestData.comment,
                                record_date: requestData.record_date
                            };
                            vm.extras.push(recordItemExtra);
                            vm.left -= parseInt(requestData.value);

                            vm.value = null;
                            vm.comment = null;
                            vm.recordDate = null;
                            vm.canSave = true;
                        }).catch(function (error) {
                            vm.canSave = true;
                        });
                },
                goWeek: function () {
                    window.location.href = generateUrl('/record/week.html', {record_id: getParam("record_id"), record_date: vm.recordItem.record_date});
                }
            }
        });
    }

    function initApp() {

    }
</script>
</body>
</html>
